/**
 * 轴线对象
 * */
const TWO = 2;
const MARGIN_RIGHT = 200; // 距离右侧距离
class AxisLine {
  currentTime = 0;
  duration = 0;
  left = 0;
  scrollLeft = 0;
  speed = 1; // 语速
  el = null; // 元素本体
  allWidth = 0; // 展示区域的时间轴宽度
  realWidth = 0; // 加上滚动条的宽度
  viewWidth = 0; // 展示区域的全部宽度
  mode = 0; // 两种模式更新,0:外部触发的timeupdate,1.由内部定时器触发
  playing = false;
  constructor(data) {
    const { duration, className = 'com-axis', speed = 1 } = data;
    this.el = document.querySelector(`.${className}`);
    this.speed = speed;
    this.duration = duration;
  }
  replay() {
    this.currentTime = 0;
    this.calcAxisPosition();
  }
  // 用于更新时长
  updateDuration(duration) {
    this.duration = duration;
    this.calcAPBS(); // 这里需要根据当前时间重新计算left
  }
  // 更新速度
  updateSpeed({ speed }) {
    this.speed = speed;
  }
  // 页面resize
  resize() {
    this.calcAPBS(); // 根据当前位置计算一下left位置
  }
  // 根据left计算时间
  calcTime() {
    const { left, realWidth, duration, scrollLeft } = this;
    this.currentTime = (((scrollLeft + left) / realWidth) * duration).toFixed(TWO) - 0;
  }
  // 点击后计算出
  clickEl(e) {
    this.playing = false;
    const { clientX } = e;
    const { el, left, realWidth, scrollLeft } = this;
    const { x } = el.getBoundingClientRect();
    let newLeft = left + (clientX - x);
    newLeft < 0 && (newLeft = 0);
    newLeft + scrollLeft > realWidth && (newLeft = realWidth - scrollLeft);
    this.left = newLeft;
    this.calcTime(); // 根据新的left计算出当前时间
    this.calcAxisPosition('click');
    return this.currentTime;
  }
  moveEl(newLeft) {
    this.playing = false;
    const { realWidth, scrollLeft } = this;
    newLeft < 0 && (newLeft = 0);
    newLeft + scrollLeft > realWidth && (newLeft = realWidth - scrollLeft);
    this.left = newLeft;
    this.calcTime(); // 根据新的left计算出当前时间
    this.calcAxisPosition();
    return this.currentTime;
  }
  // 更新left的回调
  updateLeft() {}
  // 用于更新scrollLeft的槽函数
  updateScrollLeft() {}
  // 用于主动触发的timeUpdate
  timeUpdate({ time }) {
    if (time === this.currentTime) {
      return;
    }
    Object.assign(this, { currentTime: time, playing: true });
    this.calcAxisPosition();
  }
  // 播放完毕事件
  ended() {
    if (this.playing) {
      this.replay();
    }
  }
  // 根据时间和宽度计算当前的scrollLeft和left
  calcAxisPosition() {
    const { allWidth, realWidth, currentTime, duration, scrollLeft: beforeSl } = this;
    const { viewWidth } = this;
    const realLeft = (currentTime / duration) * realWidth; // 计算一下在全长度时的left
    const trueLeft = realLeft - beforeSl;
    // 判断真实的left有没有超出页面显示
    let scrollLeft, left;
    // 没有滚动条
    if (realWidth === allWidth) {
      scrollLeft = 0;
      left = trueLeft;
    } else if (trueLeft < MARGIN_RIGHT) {
      // 处于不可视状态,需要更新scrollLeft为可视状态,
      if (trueLeft + beforeSl > MARGIN_RIGHT) {
        left = MARGIN_RIGHT;
        scrollLeft = realLeft - MARGIN_RIGHT;
      } else {
        left = realLeft - beforeSl;
        scrollLeft = 0;
      }
    } else if (trueLeft >= MARGIN_RIGHT && trueLeft <= viewWidth - MARGIN_RIGHT) {
      scrollLeft = beforeSl;
      left = trueLeft;
    } else if (trueLeft >= viewWidth - MARGIN_RIGHT) {
      left = viewWidth - MARGIN_RIGHT;
      scrollLeft = beforeSl + (trueLeft - (viewWidth - MARGIN_RIGHT));
    }
    Object.assign(this, { left, scrollLeft });
    this.updateLeft(left);
    this.updateScrollLeft(scrollLeft);
  }
  // 时间和宽度不变,根据scrollLeft计算left值
  calcAPBS() {
    const { realWidth, currentTime, duration, scrollLeft } = this;
    const realLeft = (currentTime / duration) * realWidth; // 计算一下在全长度时的left
    this.left = realLeft - scrollLeft;
    this.updateLeft(this.left);
  }
}
export default AxisLine;
